<template>
  <a-drawer
    :title="title"
    :maskClosable="true"
    :width="drawerWidth"
    placement="right"
    :closable="true"
    @close="handleCancel"
    :visible="visible"
    style="height: 100%; overflow: auto; padding-bottom: 53px"
  >
    <template slot="title">
      <div style="width: 100%">
        <span>{{ title }}</span>
        <span style="display: inline-block; width: calc(100% - 51px); padding-right: 10px; text-align: right">
          <a-button @click="toggleScreen" icon="appstore" style="height: 20px; width: 20px; border: 0px"></a-button>
        </span>
      </div>
    </template>

    <a-spin :spinning="confirmLoading">
      <a-form-model ref="form" :model="push" :label-col="labelCol" :wrapper-col="wrapperCol" labelAlign="left">
        <a-form-model-item label="选择机构" prop="doctorsHospitalId">
          <a-select v-model="push.orgCode" :options="orgList" placeholder="请输入医生执业医院" @change="handleChange">
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="推送内容">
          <a-textarea
            v-model="push.orgPushMessage"
            :max-length="100"
            placeholder="请输入推送内容，限制100字符内"
            :auto-size="{ minRows: 5, maxRows: 8 }"
          />
        </a-form-model-item>
        <a-form-model-item label="选择关联产品服务">
          <a-tree-select
            v-model="push.orgProductId"
            style="width: 100%"
            :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
            :tree-data="treeData"
            :tree-Default-Expand-All="true"
            @change="onChange"
          />
        </a-form-model-item>
      </a-form-model>
    </a-spin>

    <div class="drawer-bootom-button" v-show="!disableSubmit">
      <a-popconfirm title="确定放弃编辑？" @confirm="handleCancel" okText="确定" cancelText="取消">
        <a-button style="margin-right: 0.8rem">取消</a-button>
      </a-popconfirm>
      <a-button @click="handleSubmit" type="primary" :loading="confirmLoading">提交</a-button>
    </div>
  </a-drawer>
</template>

<script>
import { mapGetters } from 'vuex'
import { PAGE_MENU_TYPE } from '@/store/mutation-types'
import { postAction, getAction } from '@/api/manage'
import { getDictItemsFromCache } from '@/api/api'
import moment from 'moment'

export default {
  name: 'TeamDoctorModal',
  components: {},
  props: ['isEdit'],
  data() {
    return {
      drawerWidth: 700,
      disableSubmit: false,
      provinceLoading: true,
      title: '操作',
      visible: false,
      push: {},
      options: [],
      labelCol: {
        xs: { span: 24 },
        sm: { span: 7 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 15 }
      },
      doctorsCity: [],
      orgList: [],
      treeData: [
        {
          title: '血糖仪',
          value: '0-1',
          key: '0-1',
          selectable: false,
          children: []
        },
        {
          title: '试纸',
          value: '0-2',
          key: '0-2',
          selectable: false,
          children: []
        },
        {
          title: '服务',
          value: '0-3',
          key: '0-3',
          selectable: false,
          children: []
        }
      ],
      uploadLoading: false,
      confirmLoading: false,
      url: {
        doctorDetail: '/201/02/2010201',
        addDoctor: '/201/02/2010204'
      }
    }
  },
  created() {
    this.handleGetLevel()
  },
  methods: {
    ...mapGetters(['doctorId']),
    handleGetLevel() {
      getAction('/sys/sysDepart/queryTreeList').then(res => {
        console.log('handleGetLevel', res)
        if (res.success) {
          this.orgList = res.result[0].children.map(v => {
            return {
              title: v.title,
              text: v.title,
              value: v.orgCode
            }
          })
        }
      })
    },
    getProduct() {
      postAction('/shop/product/page', {
        doctorId: this.doctorId(),
        orgCode: this.push.orgCode,
        productCategory: '0'
      }).then(res => {
        if (res.success) {
          this.$nextTick(() => {
            this.treeData[0].children = res.result.records
              .filter(v => {
                return v.productCategory == 1
              })
              .map(v => {
                return {
                  title: v.productName,
                  value: v.dataId,
                  key: v.dataId
                }
              })
            this.treeData[1].children = res.result.records
              .filter(v => {
                return v.productCategory == 2
              })
              .map(v => {
                return {
                  title: v.productName,
                  value: v.dataId,
                  key: v.dataId
                }
              })
            this.treeData[2].children = res.result.records
              .filter(v => {
                return v.productCategory == 3
              })
              .map(v => {
                return {
                  title: v.productName,
                  value: v.dataId,
                  key: v.dataId
                }
              })
          })
        }
      })
    },
    handleChange(n) {
      this.orgList.forEach(v => {
        if (v.value == n) {
          this.push.orgName = v.title
        }
      })
      this.getProduct()
    },
    onChange(n) {
      this.treeData.forEach(v => {
        v.children.forEach(item => {
          if (item.value == n) {
            this.push.orgProductName = item.title
          }
        })
      })
    },
    add() {
      this.edit()
    },
    edit(record) {
      this.visible = true
      this.resetScreenSize()
    },
    // 根据屏幕变化,设置抽屉尺寸
    resetScreenSize() {
      let screenWidth = document.body.clientWidth
      if (screenWidth < 500) {
        this.drawerWidth = screenWidth
      } else {
        this.drawerWidth = 700
      }
    },
    //窗口最大化切换
    toggleScreen() {
      if (this.modaltoggleFlag) {
        this.modalWidth = window.innerWidth
      } else {
        this.modalWidth = 800
      }
      this.modaltoggleFlag = !this.modaltoggleFlag
    },
    handleSubmit() {
      const that = this
      // 触发表单验证
      this.$refs.form.validate(valid => {
        if (valid) {
          that.confirmLoading = true
          // 新建
          postAction('pushmessage/edit', this.push)
            .then(res => {
              // 新建编辑同一接口
              if (res.success) {
                that.$message.success('操作成功')
                this.$emit('ok')
                this.handleCancel()
              } else {
                that.$message.error(res.message)
              }
            })
            .finally(_ => {
              that.confirmLoading = false
            })
        } else {
          return false
        }
      })
    },
    handleCancel() {
      this.confirmLoading = false
      this.visible = false
      this.disableSubmit = false
      // this.$refs.form.resetFields()
      this.push = {}
    }
  }
}
</script>

<style lang="less" scoped>
.avatar {
  display: block;
  margin-top: 50px;
}
/deep/.ant-upload {
  display: block;
  text-align: center;
}
/deep/.ant-col-sm-4 {
  width: 14.67%;
}
.drawer-bootom-button {
  position: absolute;
  bottom: -8px;
  width: 100%;
  border-top: 1px solid #e8e8e8;
  padding: 10px 16px;
  text-align: right;
  left: 0;
  background: #fff;
  border-radius: 0 0 2px 2px;
}
.img:hover {
  cursor: pointer;
}
</style>

